<template>
  <div class="login">
    <h2>milink后台管理系统</h2>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>请登陆</span>
      </div>
      <el-form
        :model="loginUser"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginUser.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginUser.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登陆</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button @click="registerForm('ruleForm')">去注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import jwt from "jwt-decode";
export default {
  name: "login",
  data() {
    return {
      loginUser: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],

        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post("api/user/login", this.loginUser)
            .then((result) => {
              // console.log(result);
              if (result.data.code == 1) {
                //登陆成功
                //token
                const { msg } = result.data;
                //存储token
                localStorage.setItem("milink", msg);
                //解析token
                const decode = jwt(msg);

                //token解析后存储到vuex中
                this.$store.dispatch("setAuthenticated", !this.isEmpty(decode));
                this.$store.dispatch("setUser", decode);
                this.$router.push("/index");
              } else {
                this.$message.error(`登陆失败:${result.data.msg}`);
              }
            })
            .catch((err) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    registerForm() {
      this.$router.push("/register");
    },
    isEmpty(value) {
      return (
        value == undefined ||
        value == null ||
        (typeof value == "object" && Object.keys(value).length === 0) ||
        (typeof value == "string" && value.trim().length === 0)
      );
    },
  },
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(
    to right,
    #eea2a2 0%,
    #bbc1bf 19%,
    #57c6e1 42%,
    #b49fda 79%,
    #7ac5d8 100%
  );
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.login h2 {
  text-align: center;
  font-size: 18px;
  transform: translateY(180px);
}

.box-card {
  margin: 0 auto;
  transform: translateY(210px);
  width: 480px;
}
</style>